<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import macarons from '../theme/macarons.js'
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            // init()第一个参数dom节点，第二个参数为主题
            let myEchart = echarts.init(this.$refs.main, macarons);
            var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
            var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
            var option = {
                // color: ["red", "green", "blue"], // 设置全局主题
                xAxis: {
                    type: 'category',
                    data: xDataArr,
                },
                yAxis: {
                    type: 'value',

                },
                series: [
                    {
                        name: '语文',
                        type: 'bar',
                        // color: ["red", "green", "blue"], // 设置局部主题
                        data: yDataArr,// 数据
                        itemStyle: {// 设置柱状图渐变色
                            // color: {
                            //     type: 'linear', // 表示线性渐变
                            //     x: 0,
                            //     y: 0,
                            //     x2: 0,
                            //     y2: 1,
                            //     colorStops: [
                            //         {
                            //             offset: 0, color: 'red',// 表示0%处为红色
                            //         }, {
                            //             offset: 1, color: 'blue',// 表示100%处为蓝色
                            //         }
                            //     ]
                            // }
                            // color: {
                            //     type: 'radial', // 表示径向渐变
                            //     x: 0.5,
                            //     y: 0.5,
                            //     r: 0.5,
                            //     colorStops: [
                            //         {
                            //             offset: 0, color: 'red',// 表示0%处为红色
                            //         }, {
                            //             offset: 1, color: 'blue',// 表示100%处为蓝色
                            //         }
                            //     ]
                            // }

                        }
                    },

                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

